<template>
  <section>
    <resource v-if="menuId"
              :menu-id="menuId"
              @input="handleResources"
              @start="ready = false" />
    <TableProvider ref="tableRef"
                   :filters="filters"
                   :columns="columns"
                   :actions="actions"
                   :records="records"
                   :loading="loading"
                   :show-summary="showSummary"
                   :total="total"
                   :ready="ready"
                   :menu-id="menuId"
                   :is-paginated="isPaginated"
                   @search="handleSearch"
                   @handelIsPaginated="handelIsPaginated"
                   @selection="handleSelection">
      <template slot="bottom-left">
        <TableSummary v-show="showSummary"
                      :filter="filterData"
                      v-bind="summary" />
      </template>
    </TableProvider>
    <!-- 封装表格所有容器 -->
    <!-- <table-form-container /> -->
    <TableDialogSet @refresh="handelRefresh" />
    <TableDrawerSet @refresh="handelRefresh" />
    <TableBatchSet @refresh="handelRefresh" />
  </section>
</template>

<script>
import Vue from "vue";
// import _ from 'lodash'
import { mapState, mapActions, mapGetters } from "vuex";
// import { registerExecutors } from "@/libs/scheduler.js";
import { TableProvider } from "@tablra";
import Resource from "@menu/Resource.vue";
import "@/components/table/validator";

import BasicComponents from "@/components/basic";
import AdvanceComponents from "@/components/advance";
import TableComponents from "@/components/table";

Vue.use(BasicComponents);
Vue.use(AdvanceComponents);
Vue.use(TableComponents);

// registerExecutors();
export default {
  name: "TableBoard",
  components: {
    Resource,
    TableProvider,
    'TableSummary': () => import('@/components/table/TableSummary.vue'),
    'TableDialogSet': () => import('@/components/table/dialog/TableDialogSet.vue'),
    'TableDrawerSet': () => import('@/components/table/dialog/TableDrawerSet.vue'),
    'TableBatchSet': () => import('@/components/table/dialog/TableBatchSet.vue')
  },
  props: {
    boardId: {
      type: Object
    }
  },
  data () {
    return {
      resources: [],
      dialogVisible: false,
      dialogTitle: "",
      dialogData: {},
      filterData: {},
      loading: false,
      ready: false,
      prevData: null,
      selection: [],
      isPaginated: null,
      initialStatuses: [],
      userInfo: sessionStorage.getItem('userInfo')
    };
  },
  computed: {
    ...mapGetters('table', ['getMenuFirstRecordSearch', 'getMenuAdvanceRecordSearch']),
    ...mapState({
      filters: (state) => state.table.filters,
      records: (state) => state.table.records,
      columns: (state) => state.table.columns,
      actions: (state) => state.table.actions,
      summary: (state) => state.table.summary,
      total: (state) => state.table.total
    }),
    menuId () {
      let { menuId } = this.$route.params;
      return menuId || this.boardId?.menuId;
    },
    user () {
      return JSON.parse(this.userInfo)
    },
    userId () {
      return this.user?.userId
    },
    resource () {
      return (
        this.resources?.filter((resource) => resource.type === 4)?.[0] || {}
      );
    },
    showSummary () {
      return !!this.summary?.component?.name;
    },
    firstNewRecordSearch () {
      return this.getMenuFirstRecordSearch(this.userId, this.menuId)
    },
    advanceNewRecordSearch () {
      return this.getMenuAdvanceRecordSearch(this.userId, this.menuId)
    },
  },
  watch: {
    // records (newData, oldData) {
    //   if (this.prevData !== null) {
    //     extractPrevData(this.prevData)
    //     processStatuses(
    //       this.prevData,
    //       newData,
    //       this.ready,
    //       this.isPaginated,
    //       this.initialStatuses
    //     );
    //   }
    //   this.initialStatuses = this.isPaginated
    //     ? oldData.map(item => item.status)
    //     : newData.map(item => item.status);
    //   this.prevData = _.cloneDeep(newData)
    // }
  },
  methods: {
    ...mapActions({
      search: "table/search",
      initialize: "table/initialize",
      localize: "table/localize",
    }),
    async handleSearch (filterData) {
      this.filterData = { ...this.firstNewRecordSearch, ...this.advanceNewRecordSearch, ...filterData }
      this.loading = true;
      await this.search({ userId: this.userId, menuId: this.menuId, data: filterData })
      // await this.search(this.filterData);
      this.loading = false;
      // this.isPaginated = false
    },
    async handleResources (resources) {
      this.resources = resources;
      const { filters, columns, actions, localize } = this.resource;
      this.initialize({ filters, columns, actions, localize });
      this.ready = true;
      this.$nextTick(() => {
        this.$refs.tableRef.search();
        this.isPaginated = false
      })
    },
    handleSelection (selection) {
      this.selection = selection;
    },
    handelRefresh () {
      this.$refs.tableRef.search();
    },
    handelIsPaginated (value) {
      this.isPaginated = value
    }
  }
};
</script>
